<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>活动管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap/bootstrap.min.css" rel="stylesheet">
  <!-- Font Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      min-height: 100vh;
      margin: 0;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-btn.primary {
      color: #3b82f6;
    }
    
    /* 活动概览 */
    .event-overview {
      background-color: #fff;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .overview-stats {
      display: flex;
      justify-content: space-between;
    }
    
    .stat-item {
      text-align: center;
      flex: 1;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
    }
    
    .stat-label {
      font-size: 12px;
      color: #999;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 通用活动页面样式 */
    .event-page {
      display: none;
    }
    
    .event-page.active {
      display: block;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    
    .filter-item {
      flex: 1;
      padding: 6px 0;
      text-align: center;
      font-size: 14px;
      position: relative;
    }
    
    .filter-item::after {
      content: "\f078";
      font-family: "FontAwesome";
      font-size: 12px;
      margin-left: 5px;
      color: #999;
    }
    
    /* 状态标签 */
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-upcoming {
      background-color: #dbeafe;
      color: #3b82f6;
    }
    
    .status-live {
      background-color: #fee2e2;
      color: #ef4444;
      animation: pulse 1.5s infinite;
    }
    
    .status-ended {
      background-color: #f3f4f6;
      color: #6b7280;
    }
    
    .status-draft {
      background-color: #fef3c7;
      color: #d97706;
    }
    
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.6; }
      100% { opacity: 1; }
    }
    
    /* 操作按钮 */
    .action-btn {
      background: none;
      border: none;
      color: #666;
      font-size: 14px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      background-color: #f5f7fa;
    }
    
    .action-btn.edit {
      color: #3b82f6;
    }
    
    .action-btn.delete {
      color: #ef4444;
    }
    
    .action-btn.view {
      color: #10b981;
    }
    
    /* 样式1 - 卡片视图 */
    .card-view {
      padding: 10px 15px;
    }
    
    .event-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .event-card-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      position: relative;
    }
    
    .event-card-badge {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    
    .event-card-body {
      padding: 15px;
    }
    
    .event-card-title {
      font-size: 17px;
      font-weight: 600;
      margin: 0 0 8px 0;
    }
    
    .event-card-meta {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #666;
      margin-bottom: 12px;
      gap: 15px;
    }
    
    .event-card-meta i {
      margin-right: 4px;
      color: #999;
    }
    
    .event-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid #f5f7fa;
    }
    
    .event-participants {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #666;
    }
    
    .participant-avatars {
      display: flex;
      margin-right: 8px;
    }
    
    .participant-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      margin-left: -8px;
    }
    
    .participant-avatar:first-child {
      margin-left: 0;
    }
    
    /* 样式2 - 列表视图 */
    .list-view {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    
    .event-list-item {
      background-color: white;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      gap: 12px;
      align-items: center;
    }
    
    .event-list-img {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .event-list-content {
      flex: 1;
      min-width: 0;
    }
    
    .event-list-title {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 5px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .event-list-date {
      font-size: 12px;
      color: #666;
      margin: 0 0 5px 0;
      display: flex;
      align-items: center;
    }
    
    .event-list-date i {
      margin-right: 4px;
      color: #999;
      font-size: 11px;
    }
    
    .event-list-stats {
      display: flex;
      font-size: 12px;
      color: #999;
      gap: 10px;
    }
    
    .event-list-actions {
      display: flex;
      gap: 5px;
    }
    
    /* 样式3 - 日历视图 */
    .calendar-view {
      padding: 15px;
    }
    
    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .calendar-month {
      font-size: 16px;
      font-weight: 600;
    }
    
    .calendar-nav {
      display: flex;
      gap: 10px;
    }
    
    .calendar-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: white;
      border: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      cursor: pointer;
    }
    
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }
    
    .calendar-day {
      font-size: 12px;
      color: #999;
      text-align: center;
      padding: 5px 0;
    }
    
    .calendar-date {
      aspect-ratio: 1/1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      position: relative;
      cursor: pointer;
    }
    
    .calendar-date-number {
      font-size: 14px;
      font-weight: 500;
    }
    
    .calendar-date.has-event::after {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #3b82f6;
      position: absolute;
      bottom: 5px;
    }
    
    .calendar-date.today {
      background-color: #eff6ff;
      color: #3b82f6;
    }
    
    .calendar-date.other-month {
      color: #d1d5db;
    }
    
    .calendar-events {
      margin-top: 15px;
    }
    
    .calendar-event {
      background-color: white;
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      border-left: 3px solid #3b82f6;
    }
    
    /* 样式4 - 状态分组视图 */
    .status-group-view {
      margin-bottom: 15px;
    }
    
    .group-section {
      margin-bottom: 15px;
    }
    
    .group-header {
      padding: 10px 15px;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      background-color: #f5f7fa;
      display: flex;
      justify-content: space-between;
    }
    
    .group-count {
      background-color: #e5e7eb;
      color: #6b7280;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 10px;
    }
    
    .group-content {
      background-color: white;
    }
    
    .group-item {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .group-item-info {
      flex: 1;
      min-width: 0;
    }
    
    .group-item-title {
      font-size: 15px;
      font-weight: 500;
      margin: 0 0 3px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .group-item-time {
      font-size: 12px;
      color: #999;
      display: flex;
      align-items: center;
    }
    
    .group-item-time i {
      margin-right: 4px;
      font-size: 11px;
    }
    
    .group-item-actions {
      display: flex;
      gap: 5px;
    }
    
    /* 新建按钮 */
    .create-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background-color: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      text-decoration: none;
      z-index: 90;
    }
    
    /* 空状态 */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      margin-bottom: 20px;
      color: #cbd5e1;
    }
    
    .empty-text {
      font-size: 16px;
      margin: 0 0 10px 0;
    }
    
    .empty-subtext {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 0 20px 0;
    }
    
    .empty-btn {
      padding: 8px 16px;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 新建活动按钮 -->
  <a href="#" class="create-btn" id="createBtn">
    <i class="fa fa-plus"></i>
  </a>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">活动管理</h1>
    <a href="#" class="nav-btn primary" id="searchBtn">
      <i class="fa fa-search"></i>
    </a>
  </nav>
  
  <!-- 活动概览 -->
  <div class="event-overview">
    <div class="overview-stats">
      <div class="stat-item">
        <div class="stat-value">8</div>
        <div class="stat-label">即将开始</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">2</div>
        <div class="stat-label">进行中</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">15</div>
        <div class="stat-label">已结束</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">4</div>
        <div class="stat-label">草稿</div>
      </div>
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="card">卡片视图</div>
      <div class="style-tab" data-style="list">列表视图</div>
      <div class="style-tab" data-style="calendar">日历视图</div>
      <div class="style-tab" data-style="status">状态分组</div>
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item">全部状态</div>
    <div class="filter-item">全部类型</div>
    <div class="filter-item">日期筛选</div>
  </div>
  
  <!-- 样式1 - 卡片视图 -->
  <div class="event-page active" id="card">
    <div class="card-view">
      <div class="event-card">
        <div style="position: relative;">
          <img src="https://picsum.photos/seed/event1/600/400" alt="活动图片" class="event-card-img">
          <span class="status-tag status-upcoming event-card-badge">即将开始</span>
        </div>
        <div class="event-card-body">
          <h3 class="event-card-title">2023前端技术交流会</h3>
          <div class="event-card-meta">
            <span><i class="fa fa-calendar"></i> 6月15日 14:00</span>
            <span><i class="fa fa-map-marker"></i> 科技大厦B座</span>
          </div>
          <p style="font-size: 14px; color: #666; margin: 0 0 12px 0; line-height: 1.4;">
            探讨前端最新技术趋势，包含React、Vue、TypeScript等热门框架的实践经验分享。
          </p>
          <div class="event-card-footer">
            <div class="event-participants">
              <div class="participant-avatars">
                <img src="https://picsum.photos/seed/user1/100/100" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/seed/user2/100/100" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/seed/user3/100/100" alt="参与者" class="participant-avatar">
              </div>
              <span>32人已报名</span>
            </div>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="event-card">
        <div style="position: relative;">
          <img src="https://picsum.photos/seed/event2/600/400" alt="活动图片" class="event-card-img">
          <span class="status-tag status-live event-card-badge">进行中</span>
        </div>
        <div class="event-card-body">
          <h3 class="event-card-title">UI设计工作坊</h3>
          <div class="event-card-meta">
            <span><i class="fa fa-calendar"></i> 今天 10:30</span>
            <span><i class="fa fa-map-marker"></i> 创意园区A栋</span>
          </div>
          <p style="font-size: 14px; color: #666; margin: 0 0 12px 0; line-height: 1.4;">
            由资深设计师主持的UI设计工作坊，包含设计系统搭建和交互设计实践。
          </p>
          <div class="event-card-footer">
            <div class="event-participants">
              <div class="participant-avatars">
                <img src="https://picsum.photos/seed/user4/100/100" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/seed/user5/100/100" alt="参与者" class="participant-avatar">
              </div>
              <span>18人已报名</span>
            </div>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="event-card">
        <div style="position: relative;">
          <img src="https://picsum.photos/seed/event3/600/400" alt="活动图片" class="event-card-img">
          <span class="status-tag status-ended event-card-badge">已结束</span>
        </div>
        <div class="event-card-body">
          <h3 class="event-card-title">产品经理交流会</h3>
          <div class="event-card-meta">
            <span><i class="fa fa-calendar"></i> 5月28日 15:00</span>
            <span><i class="fa fa-map-marker"></i> 创业咖啡厅</span>
          </div>
          <p style="font-size: 14px; color: #666; margin: 0 0 12px 0; line-height: 1.4;">
            产品经理经验分享，包含需求分析、用户研究和产品 roadmap 规划等内容。
          </p>
          <div class="event-card-footer">
            <div class="event-participants">
              <div class="participant-avatars">
                <img src="https://picsum.photos/seed/user6/100/100" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/seed/user7/100/100" alt="参与者" class="participant-avatar">
                <img src="https://picsum.photos/seed/user8/100/100" alt="参与者" class="participant-avatar">
              </div>
              <span>45人已参加</span>
            </div>
            <div>
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 列表视图 -->
  <div class="event-page" id="list">
    <ul class="list-view">
      <li class="event-list-item">
        <img src="https://picsum.photos/seed/event1/300/300" alt="活动图片" class="event-list-img">
        <div class="event-list-content">
          <h3 class="event-list-title">2023前端技术交流会</h3>
          <p class="event-list-date"><i class="fa fa-calendar"></i> 6月15日 14:00 · 科技大厦B座</p>
          <div class="event-list-stats">
            <span>32人报名</span>
            <span class="status-tag status-upcoming">即将开始</span>
          </div>
        </div>
        <div class="event-list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="event-list-item">
        <img src="https://picsum.photos/seed/event2/300/300" alt="活动图片" class="event-list-img">
        <div class="event-list-content">
          <h3 class="event-list-title">UI设计工作坊</h3>
          <p class="event-list-date"><i class="fa fa-calendar"></i> 今天 10:30 · 创意园区A栋</p>
          <div class="event-list-stats">
            <span>18人报名</span>
            <span class="status-tag status-live">进行中</span>
          </div>
        </div>
        <div class="event-list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="event-list-item">
        <img src="https://picsum.photos/seed/event3/300/300" alt="活动图片" class="event-list-img">
        <div class="event-list-content">
          <h3 class="event-list-title">产品经理交流会</h3>
          <p class="event-list-date"><i class="fa fa-calendar"></i> 5月28日 15:00 · 创业咖啡厅</p>
          <div class="event-list-stats">
            <span>45人参加</span>
            <span class="status-tag status-ended">已结束</span>
          </div>
        </div>
        <div class="event-list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="event-list-item">
        <img src="https://picsum.photos/seed/event4/300/300" alt="活动图片" class="event-list-img">
        <div class="event-list-content">
          <h3 class="event-list-title">人工智能应用论坛</h3>
          <p class="event-list-date"><i class="fa fa-calendar"></i> 6月20日 09:00 · 国际会展中心</p>
          <div class="event-list-stats">
            <span>128人报名</span>
            <span class="status-tag status-upcoming">即将开始</span>
          </div>
        </div>
        <div class="event-list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn view"><i class="fa fa-eye"></i></button>
        </div>
      </li>
      
      <li class="event-list-item">
        <img src="https://picsum.photos/seed/event5/300/300" alt="活动图片" class="event-list-img">
        <div class="event-list-content">
          <h3 class="event-list-title">移动应用开发实战</h3>
          <p class="event-list-date"><i class="fa fa-calendar"></i> 未确定 · 线上活动</p>
          <div class="event-list-stats">
            <span>未发布</span>
            <span class="status-tag status-draft">草稿</span>
          </div>
        </div>
        <div class="event-list-actions">
          <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
          <button class="action-btn delete"><i class="fa fa-trash"></i></button>
        </div>
      </li>
    </ul>
  </div>
  
  <!-- 样式3 - 日历视图 -->
  <div class="event-page" id="calendar">
    <div class="calendar-view">
      <div class="calendar-header">
        <div class="calendar-month">2023年6月</div>
        <div class="calendar-nav">
          <button class="calendar-nav-btn" id="prevMonth"><i class="fa fa-angle-left"></i></button>
          <button class="calendar-nav-btn" id="nextMonth"><i class="fa fa-angle-right"></i></button>
        </div>
      </div>
      
      <div class="calendar-grid">
        <div class="calendar-day">日</div>
        <div class="calendar-day">一</div>
        <div class="calendar-day">二</div>
        <div class="calendar-day">三</div>
        <div class="calendar-day">四</div>
        <div class="calendar-day">五</div>
        <div class="calendar-day">六</div>
        
        <!-- 上月日期 -->
        <div class="calendar-date other-month">
          <span class="calendar-date-number">28</span>
        </div>
        <div class="calendar-date other-month">
          <span class="calendar-date-number">29</span>
        </div>
        <div class="calendar-date other-month">
          <span class="calendar-date-number">30</span>
        </div>
        <div class="calendar-date other-month">
          <span class="calendar-date-number">31</span>
        </div>
        
        <!-- 本月日期 -->
        <div class="calendar-date">
          <span class="calendar-date-number">1</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">2</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">3</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">4</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">5</span>
        </div>
        <div class="calendar-date has-event">
          <span class="calendar-date-number">6</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">7</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">8</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">9</span>
        </div>
        <div class="calendar-date has-event">
          <span class="calendar-date-number">10</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">11</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">12</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">13</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">14</span>
        </div>
        <div class="calendar-date has-event">
          <span class="calendar-date-number">15</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">16</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">17</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">18</span>
        </div>
        <div class="calendar-date">
          <span class="calendar-date-number">19</span>
        </div>
        <div class="calendar-date has-event">
          <span class="calendar-date-number">20</span>
        </div>
        <div class="calendar-date today">
          <span class="calendar-date-number">21</span>
        </div>
        <!-- 更多日期省略 -->
      </div>
      
      <div class="calendar-events">
        <div class="calendar-event">
          <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
            <span style="font-weight: 500;">2023前端技术交流会</span>
            <span class="status-tag status-upcoming">即将开始</span>
          </div>
          <div style="font-size: 12px; color: #999;">6月15日 14:00 · 科技大厦B座</div>
        </div>
        
        <div class="calendar-event">
          <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
            <span style="font-weight: 500;">人工智能应用论坛</span>
            <span class="status-tag status-upcoming">即将开始</span>
          </div>
          <div style="font-size: 12px; color: #999;">6月20日 09:00 · 国际会展中心</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 状态分组视图 -->
  <div class="event-page" id="status">
    <div class="status-group-view">
      <!-- 即将开始分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>即将开始</span>
          <span class="group-count">8</span>
        </div>
        <div class="group-content">
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">2023前端技术交流会</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 6月15日 14:00 · 科技大厦B座</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
          
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">人工智能人工智能应用论坛</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 6月20日 09:00 · 国际会展中心</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
          
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">产品设计思维工作坊</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 6月25日 13:30 · 设计中心</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 进行中分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>进行中</span>
          <span class="group-count">2</span>
        </div>
        <div class="group-content">
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">UI设计工作坊</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 今天 10:30 · 创意园区A栋</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 已结束分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>已结束</span>
          <span class="group-count">15</span>
        </div>
        <div class="group-content">
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">产品经理交流会</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 5月28日 15:00 · 创业咖啡厅</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn view"><i class="fa fa-eye"></i></button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 草稿分组 -->
      <div class="group-section">
        <div class="group-header">
          <span>草稿</span>
          <span class="group-count">4</span>
        </div>
        <div class="group-content">
          <div class="group-item">
            <div class="group-item-info">
              <h3 class="group-item-title">移动应用开发实战</h3>
              <p class="group-item-time"><i class="fa fa-calendar"></i> 未确定 · 线上活动</p>
            </div>
            <div class="group-item-actions">
              <button class="action-btn edit"><i class="fa fa-pencil"></i></button>
              <button class="action-btn delete"><i class="fa fa-trash"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态示例 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <div class="empty-icon">
      <i class="fa fa-calendar-o"></i>
    </div>
    <h3 class="empty-text">暂无活动</h3>
    <p class="empty-subtext">您还没有创建任何活动，开始组织第一个活动吧</p>
    <button class="empty-btn">创建活动</button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const eventPages = document.querySelectorAll('.event-page');
    const filterItems = document.querySelectorAll('.filter-item');
    const actionBtns = document.querySelectorAll('.action-btn');
    const backBtn = document.getElementById('backBtn');
    const searchBtn = document.getElementById('searchBtn');
    const createBtn = document.getElementById('createBtn');
    const prevMonthBtn = document.getElementById('prevMonth');
    const nextMonthBtn = document.getElementById('nextMonth');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        eventPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选项点击事件
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        showToast(`筛选：${this.textContent}`);
        // 实际应用中可打开筛选弹窗
      });
    });
    
    // 日历导航按钮
    prevMonthBtn.addEventListener('click', function() {
      showToast('切换到上月');
    });
    
    nextMonthBtn.addEventListener('click', function() {
      showToast('切换到下月');
    });
    
    // 日历日期点击
    const calendarDates = document.querySelectorAll('.calendar-date');
    calendarDates.forEach(date => {
      date.addEventListener('click', function() {
        const dateNum = this.querySelector('.calendar-date-number').textContent;
        showToast(`查看6月${dateNum}日的活动`);
      });
    });
    
    // 操作按钮点击事件
    actionBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        let action;
        if (this.classList.contains('edit')) action = '编辑';
        else if (this.classList.contains('delete')) action = '删除';
        else if (this.classList.contains('view')) action = '查看';
        
        const titleElement = this.closest('.event-card, .event-list-item, .calendar-event, .group-item')
          .querySelector('.event-card-title, .event-list-title, .calendar-event span:first-child, .group-item-title');
        const title = titleElement.textContent;
        
        if (action === '删除') {
          if (confirm(`确定要删除活动 "${title}" 吗？`)) {
            showToast(`已${action}活动 "${title}"`);
          }
        } else {
          showToast(`正在${action}活动 "${title}"`);
        }
      });
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
      // 实际应用中可以使用history.back()
    });
    
    // 搜索按钮点击事件
    searchBtn.addEventListener('click', function() {
      showToast('搜索活动');
    });
    
    // 新建按钮点击事件
    createBtn.addEventListener('click', function() {
      showToast('创建新活动');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
